<template>
	<view class="container">
		<!-- 自定义导航栏 -->
		<view class="page_title">
			<!-- <u-navbar leftIconSize="0" title="个人中心" safeAreaInsetTop placeholder bgColor="transparent"></u-navbar> -->
			<view class="header">
				<u-avatar class="avatar" size="60" :src="userInfo.avatar" @click="previewImage"></u-avatar>
				<view class="header-right">
					<view class="username">
						{{userInfo.nickName?userInfo.nickName:'未设置昵称'}}
						<u-icon v-if="userInfo.userSex == 2" color="#EC768F" name="woman"></u-icon>
						<u-icon v-if="userInfo.userSex == 1" color="#E59B60" name="man"></u-icon>
					</view>
				</view>
			</view>
		</view>

		<view class="info">
			<u-cell-group :customStyle="myGroup">
				<u-cell border center size="large" icon="setting" title="个人资料" isLink
					url="/pages/userCenter/setUserInfo"></u-cell>
				<u-cell border center size="large" icon="lock" title="交易密码" isLink
					url="/pages/userCenter/changePwd"></u-cell>
				<u-cell border center size="large" icon="lock" title="登录密码" isLink
					url="/pages/userCenter/changePassword"></u-cell>
			</u-cell-group>
		</view>

		<view class="foot">
			<view class="yangsf-ratio-w-80">
				<u-button shape="circle" type="info" text="退出登录" @click="toLogout"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getUserInfo,
		logout,
		checkAppVersion
	} from 'config/api.js';
	import {
		domain
	} from '@/config/config';
	export default {
		data() {
			return {
				isLogin: this.$store.state.isLogin,
				userInfo: this.$store.state.userInfo,
				appVersion: this.$store.state.appVersion,
				myGroup: {
					fontSize: '16px'
				}
			}
		},
		onShow() {
			this.getUser();
		},
		onPullDownRefresh() {
			this.getUser();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			previewImage() {
				if (this.userInfo.avatar) {
					uni.previewImage({
						current: this.userInfo.avatar,
						urls: [this.userInfo.avatar],
						longPressActions: {

						}
					})
				}
			},
			getUser() {
				//模拟请求API接口，获取用户信息
				getUserInfo({}).then((res) => {
					this.userInfo = res.data
					this.$store.commit('setUserInfo', res.data);
				})
			},
			toLogout() {
				logout().then(res => {
					this.$store.commit('setLogout', '');
					uni.$u.toast("退出成功，即将跳转首页")
					setInterval(() => {
						window.location.href = domain
					}, 2000);
				})
			},
			updateApp() {
				app.check(uni.$u.os())
			}

		}
	}
</script>

<style scoped>
	.container {
		height: 100vh;
	}

	.header {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 20vh;
		/* background-color: #f1f1f1; */
		/* background-image: linear-gradient(to left, #00c6fb 0%, #55aaff 100%); */
	}

	.header-right {
		margin-left: 20rpx;
	}

	.username {
		display: flex;
		font-size: 24px;
		color: #000000;
	}

	.info {
		background-color: #fff;
	}

	.item {
		display: flex;
		margin-bottom: 10px;
	}

	.label {
		flex: 1;
		color: #888;
	}

	.value {
		flex: 2;
	}

	.foot {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 20vh;
	}

	.mykefu {
		display: flex;
	}

	.myContactText {
		font-size: 16px;
		/* line-height: 22px; */
		margin-left: 4px;
		width: 100px;
	}

	.myContactBtn {
		border-style: none
	}
</style>